.classify{
  width: 100%;
  height: 100%;
  padding-top: .84rem;
  display: flex;
  flex-direction: column;
  .searchInput, .searchWrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .searchWrap{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: .8rem;
    background: #fff;
    box-shadow: 0 0.04rem 0.08rem 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    .searchInput{
      width: 90%;
      height: 70%;
      background: #ededed;
      border-radius: .1rem;
      font-size: .28rem;
      color: #666;
    }
  }
  .con{
    flex: 1;
    display: flex;
    overflow: auto;
    .left{
      width: 2rem;
      background: #fff;
      border-right: 1px solid #f2f2f6;
      p{
        width: 100%;
        text-align: center;
        font-size: .28rem;
        line-height: .8rem;
        margin: 0;
      }
    }
    .right{
      flex: 1;
      overflow: auto;
      .right_banner{
        height: 2rem;
        position: relative;
        img{
          width: 100%;
          height: 2rem;
        }
        span{
          position: absolute;
          top:50%;
          left: 50%;
          color: #fff;
          font-size: .3rem;
          transform:translate(-50%,-50%);
        }
      }
      h4{
        line-height: .3rem;
        background: #fff;
        padding: .2rem;
        text-align: center;
        font-size: .28rem;
        color: #2196f3;
        margin: 0;
      }
      .list{
        display: flex;
        flex-wrap: wrap;
        dl{
          width: 50%;
          dt{
            img{
              width: 100%;
            }
          }
          dd{
            text-align: center;
          }
        }
      }
    }
  }
}

.active{
  color: #108ee9;
  border-left: .05rem solid #108ee9;
}